import React, { Component} from 'react';
import img from "../Resource/menu.svg";
import '../CSS/Home.css';
import message from '../Resource/message.svg';
import { Badge} from 'antd';
import 'antd/dist/antd.css';
import { Card, WhiteSpace } from 'antd-mobile';
import air from '../Resource/air.svg';
import lock from '../Resource/lock.svg';
import temperature from '../Resource/temperature.svg';
import 'antd-mobile/dist/antd-mobile.css';
import { Button, Icon,Switch } from 'antd';
import light from '../Resource/light.svg';



class Home extends Component {

    constructor(props){
       super(props);
       this.unlocking=this.unlocking.bind(this);
       this.locking=this.locking.bind(this);
    }

    state = {
        size: 'large',
    };


    unlocking(){
        fetch('http://139.199.202.252:39990/lock/operate3/?operate=1', {
            method:'GET',
            aysnc:false,
        }).then(function (response) {
            response.json().then(function (data) {
                  alert(data.status)
            })
        })
    }

    locking() {
        fetch('http://139.199.202.252:39990/lock/operate3/?operate=2', {
            method: 'GET',
            aysnc: false,
        }).then(function (response) {
            response.json().then(function (data) {
                alert(data.status)
            })
        })
    }


    render(){
        return(
            <div className="header">
                  <img src={img} className="leftimg" alt="图片加载失败"/>
                      <img src={message} className="rightimg" alt="图片加载失败"/>
                   <Badge count={100} className="Badge" style={{ backgroundColor: '#52c41a' }}>
                  </Badge>
                  <WhiteSpace size="lg" />
                <Card full={true}  style={{position:"absolute",backgroundColor:"white",top:"90px"
                    ,width:"95%",left:"2.5%"}}>
                    <Card.Header title="Air conditioner:" thumb=<img className="thumb" src={air} alt="图片加载失败" /> />
                    <Card.Body>
                        <Button.Group >
                            <Button type="primary">
                                <Icon type="left" />升温
                            </Button>
                            <Button type="primary">
                                降温<Icon type="right" />
                            </Button>
                        </Button.Group>
                    </Card.Body>
                </Card>
                <WhiteSpace size="lg" />
                <Card full={true}  style={{position:"absolute",backgroundColor:"white",top:"210px"
                    ,width:"95%",left:"2.5%"}}>
                    <Card.Header title="智能灯:" thumb=<img className="thumb" src={light} alt="图片加载失败" /> />
                    <Card.Body>
                        <Button.Group >
                            <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
                        </Button.Group>
                    </Card.Body>
                </Card>
                <WhiteSpace size="lg" />
                <Card full={true}  style={{position:"absolute",backgroundColor:"white",top:"320px"
                    ,width:"95%",left:"2.5%"}}>
                    <Card.Header title="当前门锁：" thumb=<img className="thumb" src={lock} alt="图片加载失败" /> />
                    <Card.Body>
                        <Button.Group >
                            <Button onClick={this.unlocking} type="primary" shape="round" size={this.state.size}>开锁</Button>
                            <Button onClick={this.locking} type="primary" shape="round" size={this.state.size} style={{left:"25px"}}>反锁</Button>
                        </Button.Group>
                    </Card.Body>
                </Card>
                <WhiteSpace size="lg" />
                <Card full={true}  style={{position:"absolute",backgroundColor:"white",top:"445px"
                    ,width:"95%",left:"2.5%"}}>
                    <Card.Header title="实时温度：" thumb=<img className="thumb"npm src={temperature} alt="图片加载失败" /> />
                    <Card.Body>
                        <Button.Group>

                        </Button.Group>
                    </Card.Body>
                </Card>
            </div>
        );
    }
}

export default  Home;